<template>
  <div>
    <!-- <NewMap></NewMap> -->
    <!-- <VrDome></VrDome> -->

    <div id="map"></div>
    <div class="list" v-for="item in stateMap.houseInforList" :key="item.houseCode">{{ item.desc }}</div>
  </div>
</template>

<script>
import NewMap from '../../my-vue-app/src/components/NewMap.vue';
import VrDome from './components/VrDome.vue';
import { onMounted, ref } from 'vue';
import axios from 'axios';
export default {
  components: {NewMap, VrDome},
  setup() {
    const BMap = window.BMap
    let stateMap = ref({
        map: null,
        houseInforList: [],
        flag: false, // 是不是第三层
    })

    // 初始化地图
    let initMap = () => {
        stateMap.map = new window.BMap.Map('map');
        stateMap.map.enableScrollWheelZoom(true);
        var scaleCtrl = new window.BMap.ScaleControl(); // 添加比例尺控件
        stateMap.map.addControl(scaleCtrl);
        var zoomCtrl = new window.BMap.NavigationControl(); // 添加比例尺控件
        stateMap.map.addControl(zoomCtrl);
    }
    // 初始化房源数据
    let getHouseList = async (id) => {
        let res = await axios.get(`https://api-haoke-web.itheima.net/area/map?id=${id}`)
        updataMap(res.data.body)
    }

    let updataMap = (obj) => {
        const firstObj = obj[0];
        //初始化地图 这是中心店坐标和地图级别
        stateMap.map.centerAndZoom(
            new window.BMap.Point(
                firstObj.coord.longitude,
                firstObj.coord.latitude,
            ), 10
        );
        stateMap.map.clearOverlays()
        obj.map(v => {
            drawMap(v)
        })
    }

    // 动态创建图标
    let drawMap = async (v) => {
        // 创建文本标注对象
        let opts = {
            position: new window.BMap.Point(v.coord.longitude, v.coord.latitude), // 指定文本标注所在的地理位置
        };
        var label = await new window.BMap.Label(`<p style="margin-top:15px;margin-bottom:5px">${v.label}</p><p>${v.count}套</p>`, opts);
        // 自定义文本标注样式
        label.setStyle({
            width: "70px",
            height: "70px",
            lineHeight: 1,
            display: "inline-block",
            position: "absolute",
            borderRadius: '100%',
            background: "rgba(12,181,106,.9)",
            color: "#fff",
            border: "2px solid hsla(0,0%,100%,.8)",
            textAlign: "center",
            cursor: "pointer"
        });

        stateMap.map.addOverlay(label);

        label.addEventListener('click',function () {
          axios.get(`https://api-haoke-web.itheima.net/area/map?id=${v.value}`).then(res => {
            if (res.data.body.length === 0) {
                getDetailList(v)
            } else {
                updataMap(res.data.body)
            }
          })
        })
    }

    let getDetailList = async (item) => {
        let res = await axios.get(`https://api-haoke-web.itheima.net/houses?cityId=${item.value}`)
        stateMap.value = { ...stateMap, houseInforList: res.data.body.list, flag: true }
    }



    // 绘制地图
    onMounted(() => {
      initMap()
      getHouseList('AREA|dbf46d32-7e76-1196')
      // console.log(BMap)
      // var map = new BMap.Map('map')
      // var point = new BMap.Point(116.46, 39.92)
      // //   var point = new BMap.Point(116.46, 39.92)
      // //   console.log(point)
 
      // map.centerAndZoom(point, 15)
      // map.enableScrollWheelZoom(true)
      // map.addEventListener('click', function (e) {
      //   //   let a = JSON.parse(e)
      //   console.log('点击的经纬度：' + e.point.lng + ',' + e.point.lat) //
      // })
    })

    return {
      stateMap
    }
  }
}
</script>

<style>
#map {
  width: 500px;
  height: 500px;
}
</style>